<template>
  <div id="warn-chart">
    <h2>
      活跃与非活跃车辆占比
    </h2>
    <div class="box">
      <span class="icon top-left-icon"></span>
      <span class="icon top-right-icon"></span>
      <span class="icon bottom-left-icon"></span>
      <span class="icon bottom-right-icon"></span>
      <ul>
        <li v-for="item in warnList" :style="{width:parseInt(item.percent)+'%'}">
          <span class="percent" :style="{color:item.color}">{{item.percent}}%</span>
          <span class="bar" :style="{background:item.style}"></span>
          <span class="name">{{item.type}} <span :style="{color:item.color}">{{item.count}}</span></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'carActiveChart',
    data () {
      return {
        warnList: [{
          type: "活跃车数",
          count: 688,
          percent: "65",
          style:'linear-gradient(to right, #2ba4bc, #37ebba)',
          color:'#05d6c9'
        }, {
          type: "非活跃车数",
          count: 255,
          percent: "35",
          style:'linear-gradient(to right, #505dd8, #7c88f5)',
          color:'#505dd8'
        }]
      }
    },
    mounted(){

    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";
  #warn-chart {
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 10px;
    h2{
      @include linearTitle;
    }
    .box{
      position: relative;
      height: calc(100% - 34px);
      @include borderBlur;
      .icon{
        position: absolute;
        z-index: 10;
        width: 14px;
        height: 14px;
        &.top-left-icon{
          top: -2px;
          left: -2px;
          background: url("../../../static/images/index/top-left.png") no-repeat left top;
        }
        &.top-right-icon{
          top: -2px;
          right: -2px;
          background: url("../../../static/images/index/top-right.png") no-repeat right top;
        }
        &.bottom-left-icon{
          bottom: -2px;
          left: -2px;
          background: url("../../../static/images/index/left-bottom.png") no-repeat left bottom;
        }
        &.bottom-right-icon{
          bottom: -2px;
          right: -2px;
          background: url("../../../static/images/index/right-bottom.png") no-repeat right bottom;
        }
      }
      ul{
        list-style: none;
        margin: 0;
        height: 100%;
        padding: 10px 15px;
        box-sizing: border-box;
        li{
          display: inline-block;
          vertical-align: middle;
          span{
            display: block;
            text-align: center;
            &.percent{
              font-family: 'ds-digitalbold-webfont';
              font-size: $font-title;
            }
            &.bar{
              height: 24px;
              width: 100%;
              border: 2px solid #2e4e5d;
              box-sizing: border-box;
            }
            &.name{
              line-height: 30px;
              font-size: $list-font;
              display: inline-block;
              vertical-align: middle;
              span{
                font-family: 'ds-digitalbold-webfont';
                font-size: $font-title;
                display: inline-block;
                vertical-align: middle;
                margin-left: 5px;
              }
            }
          }
          &:last-child{
            span.bar{
              border-left: none;
              border-top-right-radius: 2px;
              border-bottom-right-radius: 2px;
            }
          }
          &:first-child{
            span.bar{
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
            }
          }
        }
      }
    }
  }
</style>
